<template>
  <div v-if="isShow" class="fixed top-0 left-0 z-50 w-screen h-screen">
    <div class="sticky top-0 left-0 w-full h-[8%] bg-black text-white flex items-center">
      <div class="ml-4" @click="back">
        <van-icon name="arrow-left" size="1.5rem" />
      </div>
      <div class="absolute left-1/2 -translate-x-1/2">文件预览</div>
    </div>
    <div class="h-[92%] w-full relative">
      <VuePdfEmbed
        class="h-[100%] overflow-y-auto"
        ref="pdfRef"
        annotation-layer
        text-layer
        :source="pdfSource"
        @loaded="handleLoaded"
        @rendered="handleDocumentRender"
        textLayer
      />
      <div v-if="isShowLoad" class="absolute right-4 top-4 flex items-center" @click="PDFDownload">
        <svg-icon name="download"></svg-icon>
        <div class="text-xs">下载到手机</div>
      </div>
      <div v-if="isRender" class="w-full h-full bg-black/30 absolute top-0 left-0"></div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <van-loading v-if="isRender" type="spinner" color="#fff" />
      </div>
    </div>
  </div>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
// essential styles
import 'vue-pdf-embed/dist/style/index.css'
// optional styles
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
const router = useRouter()
const isShow = defineModel()
const isRender = defineModel('isRender')
const props = defineProps({
  pdfSource: {
    type: String
  },
  fileInfo: {
    type: Object
  }
})
const back = () => {
  isShow.value = false
}
// 加载完成
const handleLoaded = () => {
  isRender.value = false
}
// 渲染完成
const isShowLoad = ref(false)
const handleDocumentRender = () => {
  isShowLoad.value = true
}
// 下载
const pdfRef = ref(null)
const PDFDownload = () => {
  // pdfRef.value.download('byhb_' + Math.random().toString(36).slice(-8))
  console.log(props.fileInfo)
  wx.previewFile(props.fileInfo)
}
</script>

<style lang="scss" scoped>
:deep(.vue-pdf-embed__page) {
  box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
}
:deep(vue-pdf-embed__page) {
  height: 100%;
  width: 100%;
}
</style>
